<template>
  <el-dialog class="dia_pay" title="收银台" append-to-body :close-on-click-modal="closeOnclickModal"
             width="500px" :visible.sync="isDialogShow" @close="close">
    <div class="tips">
      <span>订单类型：运费</span>
      <span>应付金额: <span style="font-size: 16px">￥{{payMoney}}</span></span>
    </div>
    <div class="wx_box">
      <div class="left">
        <icon-svg name="wxPay" style="width: 22px; height: 22px"></icon-svg>
        <span style="margin: 0 5px">微信支付</span>
        <span style="font-size: 12px; color: #aaa">亿万用户的选择，更快更安全</span>
      </div>
      <div class="right">
        支付 <span style="color: #cf6861; font-size: 16px">{{payMoney}}</span> 元
      </div>
    </div>
    <div class="payImgBox">
      <div class="codeBox" v-loading="loading">
        <qriously :value="payImgCode" :size="200"/>
        <div class="success_box" v-show="isPayed">
          <i class="el-icon-check" style="color: #409eff; font-size: 58px"></i>
          <div>支付成功</div>
          <div>请到运单列表查看订单</div>
        </div>
      </div>
      <span style="margin-top: 5px">请用微信扫码完成支付</span>
    </div>
  </el-dialog>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'DialogPay',
    props: {
      isPayDialogShow: {
        type: Boolean,
        default: false
      },
      ids: {
        type: [String, Array]
      },
      payMoney: {
        type: [Number, String]
      }
    },
    data () {
      return {
        isDialogShow: false,
        payImgCode: '',
        interValQueryDetail: '',
        isPayed: false,
        loading: true
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal', 'userInfo'])
    },
    watch: {
      isPayDialogShow (newValue) {
        this.isDialogShow = newValue
        if (newValue) {
          this.pay()
        }
      }
    },
    methods: {
      pay () {
        let params = {
          ids: Array.isArray(this.ids) ? this.ids : [this.ids],
          tradeType: 'WX_NATIVE'
        }
        this.loading = true
        api.pay(params).then(res => {
          this.payImgCode = res.data;
          this.loading = false
          this.interValQueryDetail = setInterval(() => {
            this.queryOrderDetail()
          }, 1314)
        })
      },
      queryOrderDetail () {
        let id = Array.isArray(this.ids) ? this.ids[0] : this.ids
        api.queryOrderDetail({id}).then(res => {
          let orderStatus = res.data.orderStatus
          this.isPayed = ['PAYED', 'END'].includes(orderStatus)
          if (this.isPayed) {
            clearInterval(this.interValQueryDetail)
          }
        })
      },
      close () {
        this.$emit('update:isPayDialogShow', false)
        this.payImgCode = ''
        clearInterval(this.interValQueryDetail)
        this.$emit('updateData')
      },
    }
  }
</script>

<style lang="scss">
  .dia_pay {
    .el-dialog__body {
      padding: 10px 0;
    }
    .tips {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 20px;
      background-color: #cfcfcf;
    }
    .wx_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      margin-top: 18px;
      .left {
        display: flex;
        align-items: center;
      }
    }
    .payImgBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      .codeBox {
        width: 200px;
        height: 200px;
        position: relative;
        .success_box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: rgba(255, 255, 255, 0.9);
          color: #409eff
        }
      }
    }
  }
</style>
